<template>
	<view class="">
		<u-sticky bgColor="#fff">
			<u-tabs lineColor="#FFB800" lineWidth="15" :activeStyle="{
			             color: '#000000',
			             fontWeight: 'bold',
			             transform: 'scale(1.05)'
			         }" :inactiveStyle="{
			             color: '#666666',
			             transform: 'scale(1)'
			         }" :list="list1" @change="tabChage"></u-tabs>
		</u-sticky>
		<view class="mainpadding">
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;" ></view>
			</view>
			<view class="mainpadding ffffff border2 margin_bottom" v-for="item in list.data" :key="item.id"
				@click="jumpurl('/pages/workbench/goodsOrderdetail?id=',item.id)">
				<view class="hong_text titletext bold">#{{item.call_no}}</view>
				<view class="flexbetween margin_top margin_bottom padding_bottom line_bottom">
					<view class="text_ft color_zero">{{http.timereturn(item.createtime * 1000)}}</view>
					<view class="text_ft color_red">${{item.paymoney}}</view>
				</view>
				<view class="flexleft ">
					<image class="imgBox margin_right2" src="@/static/image/system/deliver.png" mode=""></image>
					<view class="text_a color_zero">{{returnKmUnit(Number(item.distance))}}</view>
				</view>
				<view class="flexbetween margin_top">
					<view style="width: 500rpx;">
						<view class="text_ft color_three">{{item.username}}</view>
						<view class="text_d color_nine margin_top2">{{item.useraddre}}</view>
					</view>
					<image class="navigationBox" src="@/static/image/system/navigation.png" mode="" @tap.stop="daohang(item.useraddre)"></image>
				</view>
				<view class="yellowBtn flex1 margin_top" v-if="item.status==6" @click.stop="qiangdan(item.id)">立即搶單</view>
				<view class="flexbetween margin_top" v-if="item.status==7 || item.status==8">
					<view class="flexleft">
						<view class="textcenter margin_right5" @click.stop="phone(item.shop.shopmbl)">
							<u-icon name="phone" color="#333" size="24"></u-icon>
							<view class="text_b color_six">商家</view>
						</view>
						<view class="textcenter margin_right5" @click.stop="phone(item.mobile)">
							<u-icon name="phone" color="#333" size="24"></u-icon>
							<view class="text_b color_six">客戶</view>
						</view>
					</view>
					<view class="yellowBtn flex1" v-if="item.status==7"  @click.stop="show=true;upflag=1;listid=item.id;">拍照取貨</view>
					<view class="yellowBtn flex1" v-if="item.status==8"  @click.stop="show=true;upflag=2;listid=item.id;">拍照送達</view>
				</view>
			</view>
		</view>
		<u-modal :show="show" title="拍照上傳" confirmColor="#ffb800" confirmText="確認" @confirm="upconfirm"cancelText="取消"
			@cancel="show=false" showCancelButton>
			<view class="slot-content" style="width: 730rpx;">
				<view class="flexleft flex_wrap">
					<view class="itemimgBox flexcenter margin_top2" v-for="(item,index) in images_text" :key="index">
						<!-- 已上传 -->
						<view class="listleftimg1 radius">
							<image class="radius" :src="item" mode=""></image>
							<view class="deleteimg" @click="delindex(index,images,images_text)"></view>
						</view>
					</view>
					<view class="itemimgBox flexcenter margin_top2" @click="uploadImg(4,images,images_text)"
						v-if="images.length<4"><!-- 未上传 -->
						<image class="listleftimg1 radius" src="@/static/image/system/upimg.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					id: 6,
					name: '待接單',
					badge:{
						value:0
					}
				},{
					id: 7,
					name: '待取貨',
					badge:{
						value:0
					}
				},{
					id: 8,
					name: '配送中',
					badge:{
						value:0
					}
				},{
					id: 9,
					name: '已送達',
					badge:{
						value:0
					}
				}],
				tabsId:6,
				list: {
					data: []
				},
				show: false,
				images: [],
				images_text: [],
				upflag:0,//1拍照取货,2拍照送达
				listid:"",
				lat:"34.747201",
				lng:"113.625000"
			}
		},
		onShow() {
			this.getList()
			// this.getlocation()
		},
		methods: {
			daohang(val){
				let text = "https://www.google.com.tw/maps/place/" + val
				location.href = text;
			},
			getlocation() {
				let that = this
				navigator.geolocation.getCurrentPosition(function(position) {
					that.lat = position.coords.latitude
					that.lng = position.coords.longitude
					that.getList()
				});
			},
			tabChage(e) {
				this.tabsId = e.id
				this.getList()
			},
			async getList() { //订單列表
				let _this = this
				this.tafforderData()
				let res = await this.http.request('/api/ordergoods/tafforderlist', 'POST', {
					shopstaff_id: uni.getStorageSync("shopstaff_id"),
					shop_id: uni.getStorageSync("shop_id"),
					status:this.tabsId,
					lat:this.lat,
					lng:this.lng
				})
				if (res.code == 1) {
					this.list.data = res.data
					console.log(this.list.data)
				} else if (res.code == 0) {
					this.list.data = []
					// this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			tafforderData(){
				this.http.request('/api/ordergoods/tafforderData', 'POST', {
					shop_id: uni.getStorageSync("shop_id"),
					shopstaff_id: uni.getStorageSync("shopstaff_id"),
				}).then(res => {
					this.list1[0].badge.value = res.data.djd_num
					this.list1[1].badge.value = res.data.dqh_num
					this.list1[2].badge.value = res.data.psz_num
				})
			},
			jumpurl(url,id){
				uni.navigateTo({
					url:url+id+"&lat="+this.lat+"&lng="+this.lng
				})
			},
			qiangdan(id) {
				this.http.modal('搶單', '是否確認搶單', true, (res) => {
					if (res) {
						this.http.request('/api/ordergoods/ordergoodsqd', 'POST', {
							id: id,
							shopstaff_id: uni.getStorageSync("shopstaff_id"),
						}).then(res => {
							this.http.toast(res.msg)
							if(res.code==1){
								this.getList()
							}
						})
					}
				})
			},
			upconfirm(){
				if(this.images.length==0){
					this.http.toast("請上傳圖片！")
					return false
				}
				this.show= false
				let url = "/api/Ordergoods/ordergoodspz"
				let data = {
					id:this.listid,
					pzqh_image:this.images.join()
				}
				if(this.upflag==2){
					url = "/api/Ordergoods/ordergoodssd"
					data = {
						id:this.listid,
						pzsd_image:this.images.join()
					}
				}
				this.http.request(url, 'POST', data).then(res=>{
					this.http.toast(res.msg)
					if(res.code==1){
						this.images = []
						this.images_text = []
						
						this.getList()
					}
				})
			},
			uploadImg(value, upImgs, upImgs_text) { //上传图片
				let _this = this;
				let num = Number(value) - upImgs.length;
				if (num <= 0) {
					return false;
				}
				this.http.chooseImage(num, ['camera']).then(res => {
					for (var i = 0; i < res.length; i++) {
						_this.uploadImageService(res[i], upImgs, upImgs_text)
					}
				}).catch(err => {});
			},
			delindex(index, upImg, upImgs_text) {
				upImg.splice(index, 1)
				upImgs_text.splice(index, 1)
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				this.http.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(res.url)
					upImgs_text.push(image_item);
				}).catch(err => {});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.padding_bottom{
		padding-bottom: 30rpx;
	}
	.listleftimg1{
		width: 120rpx;
		height: 120rpx;
		position: relative;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.margin_right5 {
		margin-right: 50rpx;
	}

	.yellowBtn {
		padding: 30rpx;
		text-align: center;
		border-radius: 16rpx;
		background-color: rgba(255, 184, 0, 1);
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	::v-deep.u-tabs__wrapper__nav__item {
		flex: 1;
		white-space: nowrap;
	}

	::v-deep.u-tabs {
		padding: 0 20rpx;
	}

	.imgBox {
		width: 40rpx;
		min-width: 40rpx;
		height: 40rpx;
	}

	.fromImg {
		width: 9rpx;
		height: 30rpx;
		margin-left: 15rpx;
	}

	.navigationBox {
		width: 58rpx;
		min-width: 58rpx;
		height: 58rpx;
	}

	.notes {
		background: #F5F6FA;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.specBox {
		padding: 10rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		border: 1rpx solid #FF8505;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
	}

	.phoneImg {
		width: 38rpx;
		height: 38rpx;
	}
</style>